<template>
	<div class="xstoot">
		<!-- <img src="../../../public/grzx/person-1.png" -->
		<h2>我的服务</h2>
		<ul>
			<li v-for="item in list" :key='item.id'>
				<img :src="item.imgURL" />
				<p>{{item.title}}</p>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'Xstoot',
		data(){
			return{
				list:[
					{id:1,imgURL:'grzx/person-1.png',title:'常用收货地址'},
					{id:2,imgURL:'grzx/person-2.png',title:'常用出行人'},
					{id:3,imgURL:'grzx/person-3.png',title:'修改密码'},
					{id:4,imgURL:'grzx/person-4.png',title:'在线客服'},
					{id:5,imgURL:'grzx/person-5.png',title:'游侠客app'}
				]
			}
		}
	}
</script>

<style scoped>
	.xstoot{
		width: 100%;
		height: 5rem;
		background-color: whitesmoke;
	}
	.xstoot h2{
		font-size: 0.45rem;
		padding-top: 0.5rem;
		padding-left: 0.3rem;
		font-weight: bold;
	}
	.xstoot ul{
		margin: 0.5rem 0.4rem;
	}
	.xstoot ul li{
		padding: 0.1rem 0;
		float: left;
		width: 25%;
		text-align: center;
	}
	.xstoot ul li img{
		width: 0.7rem;
		height: 0.7rem;
	}
	.xstoot ul li p{
		padding: 0.3rem 0;
	}  
</style>
